<template>
  <div class="header">
    <div class="language">
      <!-- <a-select
        ref="select"
        v-model:value="language"
        style="width: 80px"
        @change="handleChange"
      >
        <a-select-option value="zh_cn">中文</a-select-option>
        <a-select-option value="en_us">English</a-select-option>
      </a-select> -->
    </div>
    <div class="head">
      <a-dropdown>
        <a-badge :count="count" :overflow-count="9">
          <template v-if="head">
            <a-avatar :size="40" class="ant-dropdown-link" :src="head" @click.prevent>
            </a-avatar>
          </template>
          <template v-else>
            <a-avatar :size="40" class="ant-dropdown-link" @click.prevent>
              <user-outlined />
            </a-avatar>
          </template>
        </a-badge>
        <template #overlay>
          <a-menu>
            <a-menu-item>
              主题配色：<a-switch :checked="theme === 'dark'" checked-children="暗" un-checked-children="亮" @change="changed"></a-switch>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;">2nd menu item</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;">3rd menu item</a>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue'
import { UserOutlined } from '@ant-design/icons-vue'
// import { SelectProps } from 'ant-design-vue'

// 获取上下文对象props，从中获取参数
const props = defineProps(
  {
    theme: String
  }
)
const theme = ref<string | undefined>(props.theme)

// 调用变更主题按钮
const emit = defineEmits(['changeTheme'])

// 未读消息数量
const count = ref<number>(0)
// 测试头像地址
const head = ref<string | null>('https://joeschmoe.io/api/v1/random')
// 语言
// const language = ref<string>('zh_cn')

// 变更主体，数据返回布局组件
const changed = (checked: boolean) => {
  theme.value = checked ? 'dark' : 'light'
  emit('changeTheme', theme.value)
}

// // 点击触发事件
// const handleChange: SelectProps['onChange'] = (value) => {
//   if (value) {
//     localStorage.setItem('language', language.value)
//   }
// }
</script>

<style lang="scss">
.header {
  float: right;
  padding-right: 30px;
}

.language {
  float: left;
  padding-right: 15px;
}

.head {
  float: right;
}
</style>
